<template>
	<view class="allstaffBox">
		<view class="staffItem" v-for="(item,index) in staffList" :key="index" @click="staffInfo(item)">
			<image :src="`${host}/${item.portrait[0]}`"></image>
			<view class="staffMsg">
				<view class="name">
					{{item.name}}
				</view>
				<view class="position">
					<text>{{item.position}}</text>
				</view>
				<view class="remark">
					<!-- {{item.}} -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		staffList
	}
	from "../../apis/shop/api.js"
	export default {
		data() {
			return {
				staffList: [],
				store_id: "",

			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		onLoad(option) {
			this.store_id = option.store_id;
			this.getData()
		},
		methods: {
			getData() {
				staffList({
					'store_id': this.store_id
				}).then(res => {
					this.staffList = res.data;
					this.staffList.forEach(item => {
						item.portrait = item.portrait.split(",");
					})
				})
			},
			staffInfo(item) {
				uni.navigateTo({
					url: "/pages/shop/staffInfo?store_id=" + this.store_id + "&id=" + item.id
				})
			}
		}
	}
</script>

<style lang="less">
	view {
		box-sizing: border-box;
	}

	.allstaffBox {
		background-color: #f8f8f8;
		padding: 30rpx;

		.staffItem {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 120rpx;
				height: 120rpx;
				float: left;
				border-radius: 60rpx;
			}

			.staffMsg {
				float: left;
				width: calc(~"100% - 150rpx");
				margin-left: 30rpx;
				.name {
					font-size: 30rpx;
					color: #333;
					
				}

				.position {
					margin-top: 20rpx;
					text {
						color: #E41805;
						border: 1rpx solid #E41805;
						font-size: 20rpx;
						border-radius: 4rpx;
						padding: 3rpx;
					}
				}
			}
		}
	}
</style>
